<template>
<div>
  <Card :bordered="false" dis-hover>
    <div class="index-data">
      <div class="w1250">
        <dl class="fl">
          <dt class="iconfont icon-cm-acreage"></dt>
          <dd>
            <b>{{Logistic.Area | amount}}m²</b>
            <p>在线仓储面积 </p>
          </dd>
        </dl>
        <dl class="fr">
          <dt class="iconfont icon-cm-map"></dt>
          <dd>
            <b>{{Logistic.City}}+</b>
            <p>覆盖城市</p>
          </dd>
        </dl>
      </div>
    </div>
    <!-- banner start -->
    <div class="banner-box">
      <Carousel v-model="value3" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots" :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow">
        <CarouselItem v-for="(item, key) in banners" :key="item.name">
          <div class="demo-carousel" style="background: #000142;">
            <img :src="item.url">
          </div>
        </CarouselItem>
      </Carousel>
      <div class="banner-search">
        <div class="banner-search-box fl">
          <span>找仓库</span>
          <div>
            <dl class="displayflex">
              <dt class="flexitem">仓库位置</dt>
              <dd class="flex1">
                <Cascader :data="areas" v-model="searchWarehouse.Province" @on-change="warehouseCity" trigger="hover"></Cascader>
              </dd>
            </dl>
            <dl class="displayflex">
              <dt class="flexitem">仓库面积</dt>
              <dd class="flex1">
                <a @click='searchWarehouse.TotalAreaAge=""' :class='{active:searchWarehouse.TotalAreaAge==""}'>不限</a>
                <a @click='searchWarehouse.TotalAreaAge="1"' :class='{active:searchWarehouse.TotalAreaAge=="1"}'>≤1000平米</a>
                <a @click='searchWarehouse.TotalAreaAge="2"' :class='{active:searchWarehouse.TotalAreaAge=="2"}'>1000-5000平米</a>
                <a @click='searchWarehouse.TotalAreaAge="3"' :class='{active:searchWarehouse.TotalAreaAge=="3"}'>5000-10000平米</a>
                <a @click='searchWarehouse.TotalAreaAge="4"' :class='{active:searchWarehouse.TotalAreaAge=="4"}'>10000-20000平米</a>
                <a @click='searchWarehouse.TotalAreaAge="5"' :class='{active:searchWarehouse.TotalAreaAge=="5"}'>≥20000平米</a>
              </dd>
            </dl>
            <dl class="displayflex">
              <dt class="flexitem">仓库类型</dt>
              <dd class="flex1">
                <a @click='searchWarehouse.WareHouseType=""' :class='{active:searchWarehouse.WareHouseType==""}'>不限</a>
                <a @click='searchWarehouse.WareHouseType="01"' :class='{active:searchWarehouse.WareHouseType=="01"}'>平库</a>
                <a @click='searchWarehouse.WareHouseType="02"' :class='{active:searchWarehouse.WareHouseType=="02"}'>高台库</a>
                <a @click='searchWarehouse.WareHouseType="03"' :class='{active:searchWarehouse.WareHouseType=="03"}'>楼库</a>
                <a @click='searchWarehouse.WareHouseType="04"' :class='{active:searchWarehouse.WareHouseType=="04"}'>地下仓库</a>
                <a @click='searchWarehouse.WareHouseType="05"' :class='{active:searchWarehouse.WareHouseType=="05"}'>立体库</a>
                <a @click='searchWarehouse.WareHouseType="06"' :class='{active:searchWarehouse.WareHouseType=="06"}'>坡道库</a>
                <a @click='searchWarehouse.WareHouseType="07"' :class='{active:searchWarehouse.WareHouseType=="07"}'>气体库</a>
              </dd>
            </dl>
          </div>
          <div class="search-btn" @click="handleWarehouseList()">搜索</div>
        </div>
        <div class="banner-search-box fr">
          <span>找需求</span>
          <div>
            <dl class="displayflex">
              <dt class="flexitem">需求位置</dt>
              <dd class="flex1">
                <Cascader :data="areas" v-model="searchDemand.Province" @on-change="demandCity" trigger="hover"></Cascader>
              </dd>
            </dl>
            <dl class="displayflex">
              <dt class="flexitem">需求面积</dt>
              <dd class="flex1">
                <a @click='searchDemand.TotalAreaAge=""' :class='{active:searchDemand.TotalAreaAge==""}'>不限</a>
                <a @click='searchDemand.TotalAreaAge="1"' :class='{active:searchDemand.TotalAreaAge=="1"}'>≤1000平米</a>
                <a @click='searchDemand.TotalAreaAge="2"' :class='{active:searchDemand.TotalAreaAge=="2"}'>1000-5000平米</a>
                <a @click='searchDemand.TotalAreaAge="3"' :class='{active:searchDemand.TotalAreaAge=="3"}'>5000-10000平米</a>
                <a @click='searchDemand.TotalAreaAge="4"' :class='{active:searchDemand.TotalAreaAge=="4"}'>10000-20000平米</a>
                <a @click='searchDemand.TotalAreaAge="5"' :class='{active:searchDemand.TotalAreaAge=="5"}'>≥20000平米</a>
              </dd>
            </dl>
            <dl class="displayflex">
              <dt class="flexitem">需求类型</dt>
              <dd class="flex1">
                <a @click='searchDemand.WareHouseType=""' :class='{active:searchDemand.WareHouseType==""}'>不限</a>
                <a @click='searchDemand.WareHouseType="01"' :class='{active:searchDemand.WareHouseType=="01"}'>平库</a>
                <a @click='searchDemand.WareHouseType="02"' :class='{active:searchDemand.WareHouseType=="02"}'>高台库</a>
                <a @click='searchDemand.WareHouseType="03"' :class='{active:searchDemand.WareHouseType=="03"}'>楼库</a>
                <a @click='searchDemand.WareHouseType="04"' :class='{active:searchDemand.WareHouseType=="04"}'>地下仓库</a>
                <a @click='searchDemand.WareHouseType="05"' :class='{active:searchDemand.WareHouseType=="05"}'>立体库</a>
                <a @click='searchDemand.WareHouseType="06"' :class='{active:searchDemand.WareHouseType=="06"}'>坡道库</a>
                <a @click='searchDemand.WareHouseType="07"' :class='{active:searchDemand.WareHouseType=="07"}'>气体库</a>
              </dd>
            </dl>
          </div>
          <div class="search-btn" @click="handleDemandList()">搜索</div>
        </div>
      </div>
    </div>
    <!-- banner end -->

    <!-- container start -->
    <div class="container">
      <!-- 发布 -->
      <div class="index-publish index-bg">
        <div class="w1250">
          <!-- 我有库 仓库 -->
          <a @click='demand' class="index-publish-content">
            <i class="iconfont icon-vWarehouse"></i>
            <div class="index-publish-text">
              <span class="displayflex"><strong class="flex1">发布仓库</strong><b>立即发布</b></span>
              <p>发布库房后系统可自动匹配需求！</p>
            </div>
            <em class="iconfont icon-more"></em>
          </a>
          <!-- 我要库 需求 -->
          <a @click='warehouse' class="index-publish-content">
            <i class="iconfont icon-vOrder"></i>
            <div class="index-publish-text" >
              <span class="displayflex"><strong class="flex1">发布需求</strong><b>立即发布</b></span>
              <p>发布需求后系统可自动匹配库房！</p>
            </div>
            <em class="iconfont icon-more"></em>
          </a>
        </div>
      </div>

      <!-- 仓库推荐 -->
      <div class="index-recommend clearfix">
        <div class="w1250">
          <div class="index-tit">
            <h2>仓库推荐</h2>
            <router-link to='/front/warehouseList'>
              更多<i class="iconfont icon-more02"></i>
            </router-link>
          </div>
          <ul class="index-recommend-content">
            <li v-for='item in list'>
              <a @click='warehouseDetailGo(item.GUID)'>
                <dt class="index-recommend-img rela-img">
                  <img :src="item.path" alt="">
                </dt>
                <dd class="index-recommend-text">
                  <div class="warehouse-name">
                    <b>{{item.ChineseName}}</b>
                    <span><strong>{{item.LeasingPrice}}</strong>元/m²/月 起</span>
                  </div>
                  <p class="iconfont icon-address-full">{{item.Venue}}</p>
                  <div class="warehouse-info">
                    <i>{{item.StorageType | StorageType}}</i>
                    <i>{{ item.WareHouseType | WareHouseType}}</i>
                    <i>可租 {{item.CanRentedArea}}m²</i>
                    <!-- <em>临近高速</em> -->
                  </div>
                </dd>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 最新需求 -->
      <div class="index-demand index-bg clearfix">
        <div class="w1250">
          <div class="index-tit">
            <h2>最新需求</h2>
            <router-link to='/front/demandList'>
              更多<i class="iconfont icon-more02"></i>
            </router-link>
          </div>
          <ul class="index-demand-content">
            <li v-for='item in requestList'>
              <h3>{{item.Venue}}{{item.DemandServices}}{{item.TotalAreaAge}}m² {{item.StorageType | StorageType}}</h3>
              <p>需求服务：{{item.DemandServices}}</p>
              <p>预计租期：{{item.PlanLeasePeriod}}个月</p>
              <p>存放货物：{{item.GoodsCategory | GoodsCategory}}</p>
              <div class="demand-btn">
                <a href="javascript:;" @click='requirementDetailGo(item.GUID)'><i class="iconfont icon-search" ></i>查看详情</a>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 资讯中心 -->
      <div class="index-news clearfix">
        <div class="w1250">
          <div class="index-tit">
            <h2>资讯中心</h2>
            <router-link to='/front/newsList'>
              更多<i class="iconfont icon-more02"></i>
            </router-link>
          </div>
          <div class="index-news-content">
            <div class="index-news-img">
              <img src="@/assets/images/index-news.jpg">
              <!-- <p>2017年武汉物流地产发展白皮书</p> -->
            </div>
            <ul class="index-news-list">
              <li v-for='item in newList'>
                <!-- <router-link to='/consultList'> -->
                <a @click='newsDetailGo(item.GUID)'>
                  <div class="date-wrap">
                    <b>{{item.CREATE_TIME | getD}}</b>
                    <i></i>
                    <span>{{item.CREATE_TIME |getYH}}</span>
                  </div>
                  <div class="text-wrap">
                    <p>{{item.Title}}</p>
                    <em class="iconfont icon-arrow-right"></em>
                  </div>
                </a>
                <!-- </router-link> -->
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </Card>
</div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      newList: [],
      requestList: [],
      areas: this.$store.getters.areas,

      // banner
      value3: 0,
      setting: {
        autoplay: false,
        autoplaySpeed: 6000,
        dots: "inside",
        radiusDot: true,
        trigger: "click",
        arrow: "hover"
      },
      banners: [{
        url: ""
      }],
      searchWarehouse: {
        Province: "",
        City: "",
        TotalAreaAge: "",
        WareHouseType: ""
      },
      searchDemand: {
        Province: "",
        City: "",
        TotalAreaAge: "",
        WareHouseType: ""
      },
      Logistic: {
        Area: "-",
        City: "-"
      }
    };
  },
  mounted() {
    this.getData();
    this.GetBanners();
  },
  methods: {
    warehouseCity(val, txt) {
      this.searchWarehouse.Province = val[0];
      this.searchWarehouse.City = val[1];
    },
    demandCity(val, txt) {
      this.searchDemand.Province = val[0];
      this.searchDemand.City = val[1];
    },
    getData: function() {
      var self = this;

      // 获取仓库信息
      this.axios
        .post("/api/warehouse/search", {
          Province: "",
          City: "",
          PageIndex: 0,
          PageSize: 6,
          IsPublish: "Y"
        })
        .then(function(res) {
          res.datas.forEach(e => {
            e.PictContent = JSON.parse(e.PictContent);

            if (e.PictContent && e.PictContent.length > 0) {
              e.path = (e.PictContent.find(c => c && c.path) || {
                path: "/index-recommend02.jpg"
              }).path;
            } else {
              e.path = "/index-recommend02.jpg";
            }
          });

          self.list = res.datas;
        });

      // 获取需求信息
      this.axios
        .post("/api/requirement/search", {
          Province: "",
          City: "",
          PageIndex: 0,
          PageSize: 6,
          IsPublish: "Y"
        })
        .then(function(res) {
          self.requestList = res.datas;
        });

      // 获取新闻信息
      this.axios
        .post("/api/news/search", {
          PageIndex: 0,
          PageSize: 6,
          IsPublish: "Y"
        })
        .then(function(res) {
          self.newList = res.datas;
        });

      this.axios.get("/api/alliance/list?name=Logistic").then(res => {
        if (res.success && res.datas.length > 0) {
          this.Logistic = JSON.parse(res.datas[0].Value || "null");
        }
      });
    },
    GetBanners() {
      this.axios.get("/api/alliance/list?name=Banners").then(res => {
        if (res.success && res.datas.length > 0) {
          let banners = JSON.parse(res.datas[0].Value || "null");

          for (let index = 0; index < 4; index++) {
            if (banners[index] && banners[index].original) {
              if (this.banners[index]) {
                this.banners[index].url = banners[index].original.url;
              } else {
                this.banners.push({
                  url: banners[index].original.url
                });
              }
            }
          }
        }
      });
    },
    // 仓库编辑列表
    demand: function() {
      this.$router.push("/front/warehouseEditList");
    },
    // 需求编辑列表
    warehouse: function() {
      this.$router.push(`/front/demandEditList`);
    },
    // 仓库详情页
    warehouseDetailGo: function(GUID) {
      this.$router.push(`/front/warehouseDetail/${GUID}`);
    },
    // 需求详情页
    requirementDetailGo: function(GUID) {
      this.$router.push(`/front/demandDetail/${GUID}`);
    },
    // 新闻详情页
    newsDetailGo: function(GUID) {
      this.$router.push(`/front/newsDetail/${GUID}`);
    },
    // 搜索跳转到仓库推荐列表
    handleWarehouseList: function() {
      this.$router.push({
        path: "/front/warehouseList",
        query: this.searchWarehouse
      });
    },
    // 搜索跳转到仓库需求列表
    handleDemandList: function() {
      this.$router.push({
        path: "/front/demandList",
        query: this.searchDemand
      });
    }
  }
};
</script>